
<script setup lang="ts" >
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
  computed,
  watchEffect,
} from "vue";
import {
  useRouter,
  RouterView,
  useRoute,
  onBeforeRouteLeave,
  RouteLocationNormalizedLoaded,
} from "vue-router";
import { ElMessage } from "element-plus";
// import { agvs, agvsDetails } from "../apis/http";
import { useI18n } from "vue-i18n";
import i18n from "@/lang/index";
import router from "@/router";
import type { RouteRecordRaw } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
// import Tab from '@/view/home/tab.vue'
import { LOGICAL_OPERATORS } from "@babel/types";
import pm from "../../assets/icon/pm.png"
import pm1 from "../../assets/icon/pm1.png"
import sh from "../../assets/icon/sh.png"
import sh1 from "../../assets/icon/sh1.png"
import pms from "../../assets/icon/pms.png"
import pms1 from "../../assets/icon/pms1.png"
import gg from "../../assets/icon/gg.png"
import gg1 from "../../assets/icon/gg1.png"
import cw from "../../assets/icon/cw.png"
import cw1 from "../../assets/icon/cw1.png"
const { t } = useI18n();
let langState = ref<any>(""); //语言
let isPassword = ref<boolean>(false); //是否忘记密码
let langData = ref([
  {
    value: "zh",
    label: "中文",
  },
  {
    value: "en",
    label: "English",
  },
]);
const routeData = [
  {
    path: "/test",
    name: "test",
    icon: pm,
    icon1: pm1,
    id:1,
    flag:false,
    children: [
      // {
      //   path: "/commercialAuction",
      //   name: "商拍发布列表",
      //   id:'1-1',
      //   parentId:1
      // },
      // {
      //   path: "/assetForfeiture",
      //   name: "资产罚没管理",
      //   id:'1-2',
      //   parentId:1
      // },
      // {
      //   path: "/auctionRules",
      //   name: "竞拍规则列表",
      //   id:'1-3',
      //   parentId:1
      // },
      // {
      //   path: "/commercialApproval",
      //   name: "商拍二次审批管理",
      //   id:'1-4',
      //   parentId:1
      // },
      // {
      //   path: "/forfeitApproval",
      //   name: "罚没二次审批管理",
      //   id:'1-5',
      //   parentId:1
      // },
      // {
      //   path: "/commercialPreferred",
      //   name: "商拍优先购买权管理",
      //   id:'1-6',
      //   parentId:1
      // },
      // {
      //   path: "/forfeitPurchase",
      //   name: "罚没优先购买权管理",
      //   id:'1-7',
      //   parentId:1
      // },
    ],
  },

];
const activeIndex = ref<any>(""); //导航下标
const routers = useRoute();
const route = useRouter();
const language: any = ref(""); //变量
const userName: any = ref(null);
const menu: any = ref();
onMounted: {
  userName.value = JSON.parse(localStorage.getItem("userId") || "{}");
  getUrl();
}
watchEffect(() => {
  getUrl();
});

//页面初始化
function getUrl() {
  // //进入页面之前判断是否选择过，如果选择过就执行，否则默认选择
  // if (sessionStorage.getItem("lang")) {
  //   language.value = sessionStorage.getItem("lang");
  //   if (sessionStorage.getItem("lang") == "zh") {
  //     language.value = "zh";
  //   } else if (sessionStorage.getItem("lang") == "en") {
  //     language.value = "en";
  //   }
  // } else {
  //   language.value = "zh";
  // }
  // langState.value = language.value;
  // i18n.global.locale.value = language.value;
  // sessionStorage.setItem("lang", language.value);
  //获取当前选中导航
  activeIndex.value = routers.fullPath;
  if (sessionStorage.getItem("routerIndex")) {
    activeIndex.value = sessionStorage.getItem("routerIndex");
  } else {
    sessionStorage.setItem("routerIndex", activeIndex.value);
  }




  getRoute(routeData,activeIndex.value)

  // console.log(route,999999999999)
}


function getRoute(data:any,router:any){
  console.log(data,router)
  for (const i of data) {
    i.flag=false
      for (const iterator of i.children) {
        console.log(iterator.path, router);
        if (iterator.path == router) {
          console.log(i)
          i.flag=true
        }
      }
    }
    console.log(data)
}

//选择语言
function handleChange(e: string): void {
  console.log(e);
  langState.value = e;
  i18n.global.locale.value = e as Itype;
  sessionStorage.setItem("lang", i18n.global.locale.value);
}
//选择导航栏
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = key;
  sessionStorage.setItem("routerIndex", key);

  // console.log(router.getRoutes(),router.options.routes)
  // console.log(routers, "-----");
  // let routerArr: any = router.options.routes.find((i) => i.name == "home");

  // if (routerArr) {
  //   for (const i of routerArr.children) {
  //     for (const iterator of i.children) {
  //       console.log(iterator.path, routers?.path);
  //       if (iterator.path == routers?.path) {
  //         menu.value = i;
  //       }
  //     }
  //   }
  // }

  // console.log(router.options.routes,routers.fullPath)
};
//退出登录
function back() {
  sessionStorage.removeItem("routerIndex");
  localStorage.clear();
  router.push({
    path: "/login",
  });
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 91px; background: white">
        <div class="header">
          <div class="header-left">
            123
<!--            <img src="@/assets/images/client/logo.png" alt="" />-->
          </div>
          <div>
            <div class="tips"></div>
            <el-dropdown trigger="click" style="width: 200px">
              <span class="user-info">
                <div>
                  <img
                    style="height: 35px; margin-right: 12px"
                    src="@/assets/images/client/tx.png"
                    alt=""
                  />
                </div>
                <span class="name">{{
                  userName ? userName.username : ""
                }}</span>
                <img
                  src="@/assets/images/client/right.png"
                  alt=""
                  style="height: 14px; margin-left: 20px"
                />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="back">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="15%" style="height: 100%; background: white">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            :unique-opened="true"
            router
            v-if="userName.userApply == 1"
          >
            <el-sub-menu index="1">
              <template #title>
                <img src="@/assets/icon/cw.png" alt="" />
                <span>审核拒绝</span>
              </template>

              <el-menu-item index="/auditRejection">审核拒绝</el-menu-item>
            </el-sub-menu>
          </el-menu>



          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            :unique-opened="true"
            router
            v-else
          >

            <el-sub-menu v-for="item in routeData" :key="item" :index="item.id">
              <template #title>
                <img :src="item?.flag?item.icon1:item.icon" alt=""/>
                <!-- <img src="@/assets/icon/cw.png" alt="" v-else /> -->
                <span>{{item.name}}</span>
              </template>
              <el-menu-item v-for="item1 in item.children" :key="item1" :index="item1.path"
                >{{item1.name}}</el-menu-item
              >

            </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";

</style>
